@import "./modules/_all";
.zp-header{
  @extend %zp-head;  
}


.prod-detail{
  margin-top:34px;
  width:670px;
  padding:30px 16px;
  border:1px solid #e2e2e2;
  border-radius:3px;
  @include mobile {
    width:100%;
  }
  .date{
    font-size:12px;
    span{
      color:#666;
    }
    .color{
      color:#{$active-color};
      margin-right:12px;
    }
  }
  .prod-left{
    width:300px;
    float:left;
    position:relative;
    @include mobile {
      width:100%;
    }
    .big{
      width:300px;
      border:1px solid #f7f7f7;
      @include mobile {
        width:100%;
      }
    }
    .zoom{
      position: absolute;
      z-index: 10;
      right: 0;
      bottom: 47px;
    }
    .thumbs{
      width:100%;
      .thumb{
        float:left;
        width:42px;
        cursor:pointer;
        &:hover,&.active{
          border:2px solid #c25c51;
        }
      }
    }
  }
  .prod-right{
    float:right;
    padding-left:20px;
    width:325px;
    @include mobile {
      width:100%;
      padding-left:0;
      padding-top:20px;
    }
    .txt{
      font-size:16px;
    }
    .price{
      margin-top:30px;
      span{
        font-size: 12px;
        color:#666;
      }
      .buy{
        display: inline-block;
        float:right;
        padding:0 20px;
        font-size:14px;
        line-height: 2em;
        border:1px solid #dcd6d3;
        cursor: pointer;
        margin-top:-10px;
      }
    }

    .fav{
      margin-top:70px;
      position:relative;
      .love{
        color:#333;
        display: inline-block;
        padding-left:30px;
        background:url(../images/love-icon2.jpg) no-repeat;
      }
      .split{
        color:#e9e9e9;
        padding:0 10px;
      }
      .share{
        display: inline-block;
        color:#333;
        background: url(../images/down-arrow.jpg) no-repeat 48px 8px;
        padding-right: 15px;
        cursor: pointer;
      }
      .share-to{
        display: none;
        //display: inline-block;
        position: absolute;
        left: 100px;
        top: 21px;
        border: 1px solid #ccc;
        padding: 5px 15px;
      }
    }
  }
}

.back{
  position: absolute;
  right: 0;
  top: 0;
  border: 1px solid #ccc;
  padding: 10px 40px;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
  color:#000;
  text-decoration: none;
}


/// old
.cp-gally{
  width:670px;
  @include mobile {
    width:100%;
  }
  li{
    float:left;
    margin-right:20px;
    margin-top:20px;
    position:relative;
    @include mobile {
      float:none;
      margin-right:0px;
    }

    &:nth-child(3n+0){
      margin-right: 0px;
      float:none;
      margin-right:0px;
    }
  }
  .pod{
    width:210px;
    overflow: hidden;
    border:1px solid #e2e2e2;
    border-radius:3px;
    text-align: center;
    padding:12px 0;
    @include mobile {
      width:100%;
    }
    img{
      width:100%;
    }

    .price{
      text-align: right;
      margin-top:-20px;
      span{
        display: inline-block;
        padding:0 10px;
        line-height: 1.8em;
        background:rgba(0,0,0,0.2);
        color:#fff;
      }
    }
    .desc{
      text-align: left;
      color:#{$active-color};
      padding:0 20px;
    }
    .fav{
      text-align: left;
      padding:0 20px;
      color:#cccccc;
      .love-icon{
        display: inline-block;
        width:20px;
        height: 20px;
        background:url(../images/love-icon.png) no-repeat;
        margin-right: 12px;
      }
    }
  }
}

